<template>
  <view class="product-detail">
    <!-- 顶部轮播图 -->
    <u-swiper
      :list="swiperList"
      keyName="image"
      height="375"
      indicator
      indicatorMode="line"
      circular
    ></u-swiper>

    <!-- 产品信息区域 -->
    <view class="product-info">
      <!-- 产品标题 -->
      <view class="product-title">
        <text class="title">{{ productInfo.name }}</text>
      </view>

      <!-- 产品描述 -->
      <view class="product-desc">
        <view class="desc-content" v-html="productInfo.description"></view>
      </view>
    </view>
  </view>
</template>
<script>
	import api from "@/api/api";
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [
      ],
      // 产品信息
      productInfo: {
      }
    }
  },
  async onLoad(options) {
    if (options.id) {
      await this.loadProductData(options.id)
    }
  },
  methods: {
	  // 加载产品数据
	  async loadProductData(id) {
	    // 这里应该是从API获取数据
	    let res = await this.depot.get(api.aiCard("product/findOne?id=" + id));
	    let product = res && res.data && res.data.data ? res.data.data : null;
	    this.productInfo = product;
		this.$forceUpdate()
	    res = await this.depot.post(api.aiCard("productImage/findProductImagePage?page=0&size=100"), {
	  	  productId: id
	    })
	    let imgList = res && res.data && res.data.data && res.data.data.content ? res.data.data.content : [];
	    if (imgList && imgList.length > 0) {
	  	  for(let imgInfo of imgList) {
	  		  this.swiperList.push({
	  			  image: imgInfo.imgUrl
	  		  });
	  	  }
	    }
	  },
  }
}
</script>
<style lang="less">
.product-detail {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 20rpx;
  
  .product-info {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .product-title {
      display: flex;
      flex-direction: column;
      margin-bottom: 30rpx;
      border-bottom: 1rpx solid #f2f2f2;
      padding-bottom: 20rpx;
      
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .price {
        font-size: 32rpx;
        color: #e74c3c;
        font-weight: bold;
      }
    }
    
    .product-desc {
      display: flex;
      flex-direction: column;
      
      .desc-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .desc-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        white-space: pre-line;
      }
    }
  }
}
</style>
